<html data-layout-decorator="layout/form">
<div data-layout-fragment="content">
    <form class="layui-form model-form" action="" style="width:80%;">
    <input name="id" type="hidden" th:value="${info['id']}">
        <div class="layui-form-item">
            <label class="layui-form-label">头像：</label>
            <div class="layui-input-block">
                <div class="layui-upload-drag"><a th:href="${info['avatar']}"  target="black">
                    <img id="avatar_show_id"
                         th:src="${info['avatar']}" alt="点击查看大图"
                         width="90" height="90"></a>
                    <input type="hidden" id="avatar" name="avatar" th:value="${info['avatar']}" >
                </div>
                <div style="margin-top:10px;">
                    <button type="button" class="layui-btn" id="btnUploadImg_avatar"><i class="layui-icon">&#xe67c;</i>上传头像</button>
                </div>
                <div class="layui-form-mid layui-word-aux">建议尺寸：建议上传尺寸450x450</div>
            </div>
            <style type="text/css">.layui-upload-drag {
                position: relative;
                padding: 10px;
                border: 1px dashed #e2e2e2;
                background-color: #fff;
                text-align: center;
                cursor: pointer;
                color: #999;
            }</style>
            <script type="text/javascript">layui.use(['upload', 'croppers'], function () {
                //声明变量
                var layer = layui.layer
                    , upload = layui.upload
                    , croppers = layui.croppers
                    , $ = layui.$;

                if (true) {

                    //图片裁剪组件
                    croppers.render({
                        elem: '#btnUploadImg_avatar'
                        , name: "avatar"
                        , saveW: 450     //保存宽度
                        , saveH: 450
                        , mark: 1.0 / 1    //选取比例
                        , area: ['750px', '500px']  //弹窗宽度
                        , url: "/upload/uploadImage?name=admin"
                        , done: function (url) {
                            console.log(url)
                            //上传完毕回调
                            $('#avatar').val(url);
                            $('#avatar_show_id').attr('src', url);
                        }
                    });

                } else {

                    /**
                     * 普通图片上传
                     */
                    var uploadInst = upload.render({
                        elem: '#btnUploadImg_avatar'
                        , url: "/upload/uploadImage?name=admin"
                        , accept: 'images'
                        , acceptMime: 'image/*'
                        , exts: "jpg|png|gif|bmp|jpeg"
                        , field: 'file'//文件域字段名
                        , size: 1024 * 10 //最大允许上传的文件大小
                        , before: function (obj) {
                            //预读本地文件
                        }
                        , done: function (res) {
                            //上传完毕回调

                            if (res.code != 0) {
                                layer.msg(res.msg, {icon: 5});
                                return false;
                            }

                            //上传成功
                            $('#avatar_show_id').attr('src', res.img);
                            $('#avatar').val(res.img);
                        }
                        , error: function () {
                            //请求异常回调
                            return layer.msg('数据请求异常');
                        }
                    });

                }

            });</script>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">真实姓名：</label>
                <div class="layui-input-inline">
                    <input name="realname" th:value="${info['realname']}" lay-verify="required" autocomplete="off"
                           placeholder="请输入真实姓名" class="layui-input" type="text">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">出生日期：</label>
                <div class="layui-input-inline">
                    <input name="birthday" id="birthday" th:value="${info['birthday']}" lay-verify="date"
                           placeholder="请选择出生日期" autocomplete="off" class="layui-input date-icon" type="text">
                    <script type="text/javascript">layui.use(['func'], function () {
                        var func = layui.func;
                        func.initDate(['birthday|date||'], function (value, date) {
                            console.log("当前选择日期:" + value);
                            console.log("日期详细信息：" + JSON.stringify(date));
                        });
                    });</script>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">性别：</label>
                <div class="layui-input-inline">
                    <select name='gender' id='gender' lay-verify='required' lay-search='' lay-filter='gender'>
                        <option value=''>【请选择性别】</option>
                        <option value='1' th:selected="${info['gender']==1}?true:false">男</option>
                        <option value='2' th:selected="${info['gender']==2}?true:false">女</option>
                        <option value='3' th:selected="${info['gender']==3}?true:false">保密</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">手机号码：</label>
                <div class="layui-input-inline">
                    <input name="mobile" th:value="${info['mobile']}" lay-verify="required|phone" placeholder="请输入手机号码"
                           autocomplete="off" class="layui-input" type="tel">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">登录名：</label>
                <div class="layui-input-inline">
                    <input name="username" th:value="${info['username']}" lay-verify="required" autocomplete="off"
                           placeholder="请输入登录用户名" class="layui-input" type="text">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">登录密码：</label>
                <div class="layui-input-inline">
                    <input name="password" autocomplete="off" placeholder="请输入登录密码" class="layui-input" type="password">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">状态：</label>
                <div class="layui-input-inline">
                    <input name="status" id="status" th:value="${info['status']}" lay-skin="switch" lay-filter="status"
                           lay-text="正常|禁用" type="checkbox" checked="">
                    <script th:inline="javascript" type="text/javascript">layui.use(['form'], function () {
                        var form = layui.form,
                            $ = layui.$;

                        if (1 == 1) {
                            $("#status").attr('type', 'hidden').val(1);
                        } else {
                            $("#status").attr('type', 'hidden').val(2);
                        }
                        form.on('switch(status)', function (data) {
                            console.log('switch开关选择状态：' + this.checked);
                            $(data.elem).attr('type', 'hidden').val(this.checked ? 1 : 2);
                        });
                    });</script>
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-form-text" style="width:625px;">
            <label class="layui-form-label">用户角色：</label>
            <div class="layui-input-block">
                <!--<input name="roleIds[1]" lay-skin="primary" title="超级管理员" type="checkbox">-->
                <!--<input name="roleIds[2]" lay-skin="primary" title="管理员" type="checkbox">-->
                <!--<input name="roleIds[3]" lay-skin="primary" title="运营" type="checkbox">-->
                <!--<input name="roleIds[4]" lay-skin="primary" title="客服" type="checkbox">-->
                <label th:each="roleItem:${role}" th:remove="tag">
                    <input th:checked="${roleItem['checked']}? true : false" th:name="'roleIds['+${roleItem['id']}+']'"
                           lay-skin="primary" th:title="${roleItem['name']}" type="checkbox">
                </label>
            </div>
        </div>
        <div class="layui-form-item" style="width: 625px;">
            <label class="layui-form-label">备注：</label>
            <div class="layui-input-block">
                <textarea name="remark" placeholder="请输入备注" th:text="${info['remark']}?''"
                          class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item text-center model-form-footer">
            <button class="layui-btn" lay-filter="submitForm" lay-submit>立即保存</button>
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">关闭</button>
        </div>
    </form>

</div>
</html>